<!-- 检查列表 -->
<template>
	<view class="table">
		<view class="tr">
			<view class="th" style="width: 2.6rem;">
				No
			</view>
			<view class="th" v-for="(item,index) in columns" :key="index" :class="item.width ? '' :'tw-flex'"
				:style="{'width':item.width?item.width:''}">{{item.value}}</view>
			<view class="th" style="width: 6rem;" v-show="showOperate">操作列</view>
		</view>

		<view class="tr" v-for="(item,index) in tableList" :key="index">
			<view class="td1" style="width: 2.6rem;align-items: center;">{{index+1}}</view>
			<view class="td1" :class="colum.width?'':'tw-flex'" :style="{'width':colum.width?colum.width:'auto'}"
				v-for="(colum,k) in columns" :key="k">

				<view v-show="colum.type =='radio'">
					<radio-group @change="changeRadio($event,colum,item,index)">
						<label v-for="(it,i) in radioConfig" :key="i">
							<radio :value="it.value" :style="i==0?'margin-left: 7px;':'margin-left: 0px;'"
								:checked="item[colum.key]==it.value">{{it.name}}</radio>
						</label>
					</radio-group>
				</view>
				<view v-show="colum.type =='text'">
					{{item[colum.key]}}
				</view>

			</view>
			<view class="td1" style="width: 6rem;" v-show="showOperate">
				<slot :item="item" style="align-items: center;display: flex;"></slot>
			</view>
		</view>
	</view>

</template>

<script>
	export default {
		props: {
			tableList: {
				type: Array,
				default: [],
				required: true,
			},
			columns: {
				type: Array,
				default: [],
				required: true,
			},
			showOperate: {
				type: Boolean,
				default: true
			},
			/**
			 * 如果列是 radio 格式 需要传入此配置
			 */
			radioConfig: {
				type: Array,
				default: []
			}
		},
		methods: {
			changeRadio(event, column, item, index) {
				item[column.key] = event.detail.value
				this.$emit('updateTableList', {
					item,
					index,
					key: column.key
				})
			}
		}
	}
</script>

<style>
	.table {
		display: flex;
		flex-direction: column;
		margin: 0 auto;
		margin-top: 0.5rem;
		padding-bottom: 0.5rem;
		width: 100%;
	}

	.th {
		min-width: 12%;
		font-weight: 500;
		/* 字体加重 */
		background-color: #7eb4d3;
		/* 主轴居中 */
		align-items: center;
		/* 自动换行 */
		text-align: center;
		/* 背景色 */
		/* padding-top: 5px; */
		/* padding-bottom: 5px; */
		color: #fff;
	}

	.th,
	.td1 {
		/* 公有的属性 */
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;

		/* 文本居中 */
		justify-content: center;

		/* 交叉轴居中 */
		border: 1px solid #dadada;
		/* 单元格线框 */

		min-height: 2.2rem;
	}

	.td1 {
		padding: 3px 0px 3rpx 3px;
	}

	.tw-flex {
		flex: 1;
	}

	.tr {
		display: flex;
		flex-direction: row;
	}
</style>